<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>车辆信息管理系统</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fa;
            color: #333;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            font-size: 2rem;
            margin-bottom: 10px;
        }

        .subtitle {
            text-align: center;
            opacity: 0.9;
        }

        .dashboard {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }

        .card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            flex: 1;
        }

        .card h2 {
            color: #667eea;
            margin-bottom: 15px;
            border-bottom: 2px solid #f0f0f0;
            padding-bottom: 10px;
        }

        .stats {
            display: flex;
            justify-content: space-around;
            text-align: center;
        }

        .stat-item {
            padding: 10px;
        }

        .stat-value {
            font-size: 2rem;
            font-weight: bold;
            color: #764ba2;
        }

        .stat-label {
            color: #666;
            font-size: 0.9rem;
        }

        .content {
            display: flex;
            gap: 20px;
        }

        .info-section {
            flex: 2;
        }

        .list-section {
            flex: 1;
        }

        .vehicle-details {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }

        .detail-item {
            margin-bottom: 15px;
        }

        .detail-label {
            font-weight: bold;
            color: #667eea;
            margin-bottom: 5px;
        }

        .detail-value {
            padding: 8px 12px;
            background-color: #f8f9fa;
            border-radius: 5px;
            border: 1px solid #e9ecef;
        }

        .list-group {
            max-height: 500px;
            overflow-y: auto;
        }

        .list-group-item {
            padding: 15px;
            border: 1px solid #eee;
            border-radius: 5px;
            margin-bottom: 10px;
            background: white;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .list-group-item:hover {
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px);
        }

        .list-group-item.active {
            border-color: #667eea;
            background-color: #f8f9ff;
        }

        .item-title {
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }

        .item-details {
            font-size: 0.9rem;
            color: #666;
        }

        .status-badge {
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: bold;
        }

        .status-active {
            background-color: #d4edda;
            color: #155724;
        }

        .status-inactive {
            background-color: #f8d7da;
            color: #721c24;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .form-control {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
            transition: background-color 0.3s;
        }

        .btn-primary {
            background-color: #667eea;
            color: white;
        }

        .btn-primary:hover {
            background-color: #5a6fd8;
        }

        .btn-success {
            background-color: #28a745;
            color: white;
        }

        .btn-success:hover {
            background-color: #218838;
        }

        .btn-block {
            display: block;
            width: 100%;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }

        .modal-content {
            background-color: white;
            margin: 10% auto;
            padding: 20px;
            border-radius: 10px;
            width: 50%;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .close {
            font-size: 1.5rem;
            cursor: pointer;
        }

        .search-box {
            margin-bottom: 15px;
        }

        footer {
            text-align: center;
            margin-top: 30px;
            padding: 20px;
            color: #666;
            font-size: 0.9rem;
        }

        /* 3D模型和图片展示区域样式 */
        .model-viewer-container {
            width: 100%;
            height: 300px;
            margin-bottom: 20px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        model-viewer {
            width: 100%;
            height: 100%;
        }

        /* 车辆图片展示区域 */
        .vehicle-image-container {
            width: 100%;
            height: 300px;
            margin-bottom: 20px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f8f9fa;
        }

        .vehicle-image {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            display: none; /* 默认隐藏图片 */
        }

        /* 图片加载错误时显示的占位符 */
        .image-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #666;
            font-size: 14px;
            text-align: center;
            padding: 20px;
        }

        .image-placeholder i {
            font-size: 48px;
            margin-bottom: 10px;
            color: #ccc;
        }

        /* 展示区域容器 */
        .display-container {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }

        .display-item {
            flex: 1;
        }

        .display-item h3 {
            text-align: center;
            margin-bottom: 10px;
            color: #667eea;
        }

        @media (max-width: 768px) {
            .content {
                flex-direction: column;
            }

            .vehicle-details {
                grid-template-columns: 1fr;
            }

            .modal-content {
                width: 90%;
            }

            .display-container {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>车辆信息管理系统</h1>
            <p class="subtitle">查看和管理您的车辆详细信息</p>
        </header>

        <div class="dashboard">
            <div class="card">
                <h2>系统概览</h2>
                <div class="stats">
                    <div class="stat-item">
                        <div class="stat-value" id="total-vehicles">0</div>
                        <div class="stat-label">总车辆数</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value" id="active-vehicles">0</div>
                        <div class="stat-label">运营中</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value" id="available-vehicles">0</div>
                        <div class="stat-label">可用车辆</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="content">
            <div class="info-section">
                <div class="card">
                    <h2>车辆详细信息</h2>
                    <!-- 3D模型和图片展示区域 -->
                    <div class="display-container">
                        <div class="display-item">
                            <h3>3D模型展示</h3>
                            <div class="model-viewer-container">
                                <model-viewer
                                    id="model-viewer"
                                    src="https://modelviewer.dev/shared-assets/models/glTF-Sample-Models/2.0/Duck/glTF/Duck.gltf"
                                    alt="3D Vehicle Model"
                                    auto-rotate
                                    camera-controls
                                    ar
                                    ar-modes="webxr scene-viewer quick-look">
                                </model-viewer>
                            </div>
                        </div>
                        <div class="display-item">
                            <h3>车辆图片</h3>
                            <div class="vehicle-image-container">
                                <img id="vehicle-image" class="vehicle-image" src="" alt="Vehicle Image">
                                <div class="image-placeholder" id="image-placeholder">
                                    <i>🚗</i>
                                    <p>请选择车辆查看图片</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="vehicle-details" id="vehicle-details">
                        <div class="detail-item">
                            <div class="detail-label">车牌号</div>
                            <div class="detail-value" id="license-plate">-</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">车辆品牌</div>
                            <div class="detail-value" id="brand">-</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">车辆型号</div>
                            <div class="detail-value" id="model">-</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">VIN码</div>
                            <div class="detail-value" id="vin-code">-</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">城市ID</div>
                            <div class="detail-value" id="city-id">-</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">级别ID</div>
                            <div class="detail-value" id="level-id">-</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">车型ID</div>
                            <div class="detail-value" id="model-id">-</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">设备ID</div>
                            <div class="detail-value" id="device-id">-</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">车辆证件ID</div>
                            <div class="detail-value" id="vehicle-files-id">-</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">车辆大脑状态</div>
                            <div class="detail-value" id="car-brain-status">-</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">车辆大脑品牌</div>
                            <div class="detail-value" id="car-brain-brand">-</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">车辆大脑编号</div>
                            <div class="detail-value" id="car-brain-number">-</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">大屏品牌</div>
                            <div class="detail-value" id="large-screen-brand">-</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">大屏编号</div>
                            <div class="detail-value" id="large-screen-number">-</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">状态</div>
                            <div class="detail-value" id="status">-</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">最后更新时间</div>
                            <div class="detail-value" id="last-updated">-</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="list-section">
                <div class="card">
                    <h2>车辆列表</h2>
                    <div class="search-box">
                        <input type="text" class="form-control" placeholder="搜索车辆..." id="vehicle-search">
                    </div>
                    <div class="list-group" id="vehicles-list">
                        <!-- 车辆列表将通过JavaScript动态生成 -->
                    </div>
                </div>
            </div>
        </div>

        <footer>
            <p>© 2025 车辆信息管理系统 - 车辆详细信息管理平台</p>
        </footer>
    </div>

    <script>
        // 模拟车辆数据 - 实际项目中应从后端API获取
        const mockVehicles = [
            {
                id: 1,
                license_plate: "京A12345",
                brand: "比亚迪",
                model: "汉EV",
                city_id: 1,
                level_id: 1,
                model_id: 1,
                vin_code: "VIN1234567890",
                device_id: 1001,
                vehicle_files_id: 2001,
                is_installed_car_brain: 1,
                car_brain_brand: "比亚迪",
                car_brain_number: "BYD2025001",
                large_screen_brand: "京东方",
                large_screen_number: "BOE2025001",
                status: 1,
                last_updated: "2025-09-25 10:30:00",
                model_url: "C:\\Users\\16170\\Pictures\\1680838295227750.png",
                image_url: "C:\\Users\\16170\\Pictures\\1680838295227750.png"
            },
            {
                id: 2,
                license_plate: "京B67890",
                brand: "特斯拉",
                model: "Model 3",
                city_id: 1,
                level_id: 2,
                model_id: 2,
                vin_code: "VIN0987654321",
                device_id: 1002,
                vehicle_files_id: 2002,
                is_installed_car_brain: 1,
                car_brain_brand: "特斯拉",
                car_brain_number: "TESLA2025002",
                large_screen_brand: "LG",
                large_screen_number: "LG2025002",
                status: 1,
                last_updated: "2025-09-25 10:25:00",
                model_url: "https://modelviewer.dev/shared-assets/models/glTF-Sample-Models/2.0/Corvette/glTF/Corvette.gltf",
                image_url: "https://images.unsplash.com/photo-1590273108925-5745388e854e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
            },
            {
                id: 3,
                license_plate: "京C11111",
                brand: "蔚来",
                model: "ES6",
                city_id: 1,
                level_id: 1,
                model_id: 3,
                vin_code: "VIN1111111111",
                device_id: 1003,
                vehicle_files_id: 2003,
                is_installed_car_brain: 0,
                car_brain_brand: "",
                car_brain_number: "",
                large_screen_brand: "三星",
                large_screen_number: "SAM2025003",
                status: 0,
                last_updated: "2025-09-25 09:15:00",
                model_url: "https://modelviewer.dev/shared-assets/models/glTF-Sample-Models/2.0/BoxTextured/glTF/BoxTextured.gltf",
                image_url: "https://images.unsplash.com/photo-1611137331304-9461b523a1ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
            },
            {
                id: 4,
                license_plate: "京D22222",
                brand: "小鹏",
                model: "P7",
                city_id: 1,
                level_id: 2,
                model_id: 4,
                vin_code: "VIN2222222222",
                device_id: 1004,
                vehicle_files_id: 2004,
                is_installed_car_brain: 1,
                car_brain_brand: "小鹏",
                car_brain_number: "XPENG2025004",
                large_screen_brand: "天马",
                large_screen_number: "TIANMA2025004",
                status: 1,
                last_updated: "2025-09-25 10:40:00",
                model_url: "https://modelviewer.dev/shared-assets/models/glTF-Sample-Models/2.0/Duck/glTF/Duck.gltf",
                image_url: "https://images.unsplash.com/photo-1617458642530-638c6f50958f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
            },
            {
                id: 5,
                license_plate: "沪A34567",
                brand: "理想",
                model: "ONE",
                city_id: 2,
                level_id: 1,
                model_id: 5,
                vin_code: "VIN3456789012",
                device_id: 1005,
                vehicle_files_id: 2005,
                is_installed_car_brain: 1,
                car_brain_brand: "理想",
                car_brain_number: "LI2025005",
                large_screen_brand: "京东方",
                large_screen_number: "BOE2025005",
                status: 1,
                last_updated: "2025-09-25 11:15:00",
                model_url: "https://modelviewer.dev/shared-assets/models/glTF-Sample-Models/2.0/Avocado/glTF/Avocado.gltf",
                image_url: "https://images.unsplash.com/photo-1617450366422-7a1b7c7e7f0d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
            },
            {
                id: 6,
                license_plate: "粤B45678",
                brand: "奔驰",
                model: "EQC",
                city_id: 3,
                level_id: 3,
                model_id: 6,
                vin_code: "VIN4567890123",
                device_id: 1006,
                vehicle_files_id: 2006,
                is_installed_car_brain: 1,
                car_brain_brand: "奔驰",
                car_brain_number: "BENZ2025006",
                large_screen_brand: "博世",
                large_screen_number: "BOSCH2025006",
                status: 1,
                last_updated: "2025-09-25 09:45:00",
                model_url: "https://modelviewer.dev/shared-assets/models/glTF-Sample-Models/2.0/AlphaBlendModeTest/glTF/AlphaBlendModeTest.gltf",
                image_url: "https://images.unsplash.com/photo-1590273108925-5745388e854e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
            },
            {
                id: 7,
                license_plate: "浙A56789",
                brand: "宝马",
                model: "iX3",
                city_id: 4,
                level_id: 3,
                model_id: 7,
                vin_code: "VIN5678901234",
                device_id: 1007,
                vehicle_files_id: 2007,
                is_installed_car_brain: 1,
                car_brain_brand: "宝马",
                car_brain_number: "BMW2025007",
                large_screen_brand: "三星",
                large_screen_number: "SAM2025007",
                status: 0,
                last_updated: "2025-09-25 08:30:00",
                model_url: "https://modelviewer.dev/shared-assets/models/glTF-Sample-Models/2.0/CesiumMilkTruck/glTF/CesiumMilkTruck.gltf",
                image_url: "https://images.unsplash.com/photo-1617450365226-9bf2d4f6b8f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
            },
            {
                id: 8,
                license_plate: "苏A67890",
                brand: "奥迪",
                model: "e-tron",
                city_id: 5,
                level_id: 3,
                model_id: 8,
                vin_code: "VIN6789012345",
                device_id: 1008,
                vehicle_files_id: 2008,
                is_installed_car_brain: 1,
                car_brain_brand: "奥迪",
                car_brain_number: "AUDI2025008",
                large_screen_brand: "LG",
                large_screen_number: "LG2025008",
                status: 1,
                last_updated: "2025-09-25 11:30:00",
                model_url: "https://modelviewer.dev/shared-assets/models/glTF-Sample-Models/2.0/Corvette/glTF/Corvette.gltf",
                image_url: "https://images.unsplash.com/photo-1590273108925-5745388e854e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
            },
            {
                id: 9,
                license_plate: "川A78901",
                brand: "红旗",
                model: "E-HS9",
                city_id: 6,
                level_id: 2,
                model_id: 9,
                vin_code: "VIN7890123456",
                device_id: 1009,
                vehicle_files_id: 2009,
                is_installed_car_brain: 1,
                car_brain_brand: "红旗",
                car_brain_number: "HQ2025009",
                large_screen_brand: "京东方",
                large_screen_number: "BOE2025009",
                status: 1,
                last_updated: "2025-09-25 10:00:00",
                model_url: "https://modelviewer.dev/shared-assets/models/glTF-Sample-Models/2.0/BoxTextured/glTF/BoxTextured.gltf",
                image_url: "https://images.unsplash.com/photo-1617450366422-7a1b7c7e7f0d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
            },
            {
                id: 10,
                license_plate: "湘A89012",
                brand: "几何",
                model: "几何A",
                city_id: 7,
                level_id: 1,
                model_id: 10,
                vin_code: "VIN8901234567",
                device_id: 1010,
                vehicle_files_id: 2010,
                is_installed_car_brain: 0,
                car_brain_brand: "",
                car_brain_number: "",
                large_screen_brand: "天马",
                large_screen_number: "TIANMA2025010",
                status: 1,
                last_updated: "2025-09-25 11:45:00",
                model_url: "https://modelviewer.dev/shared-assets/models/glTF-Sample-Models/2.0/Duck/glTF/Duck.gltf",
                image_url: "https://images.unsplash.com/photo-1611137331304-9461b523a1ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
            }
        ];

        // 初始化统计信息
        document.getElementById('total-vehicles').textContent = mockVehicles.length;
        document.getElementById('active-vehicles').textContent = mockVehicles.filter(v => v.status === 1).length;
        document.getElementById('available-vehicles').textContent = mockVehicles.filter(v => v.status === 1).length;

        // 渲染车辆列表
        function renderVehicles(vehicles) {
            const vehiclesList = document.getElementById('vehicles-list');
            vehiclesList.innerHTML = '';

            vehicles.forEach(vehicle => {
                const statusClass = vehicle.status === 1 ? 'status-active' : 'status-inactive';
                const statusText = vehicle.status === 1 ? '运营中' : '停运';

                const vehicleElement = document.createElement('div');
                vehicleElement.className = 'list-group-item';
                vehicleElement.setAttribute('data-vehicle-id', vehicle.id);
                vehicleElement.innerHTML = `
                    <div class="item-title">${vehicle.license_plate} (${vehicle.brand} ${vehicle.model})</div>
                    <div class="item-details">设备ID: ${vehicle.device_id}</div>
                    <div class="item-details">
                        <span class="status-badge ${statusClass}">${statusText}</span>
                        <span style="margin-left: 10px;">最后更新: ${vehicle.last_updated}</span>
                    </div>
                `;

                vehicleElement.addEventListener('click', () => {
                    showVehicleDetails(vehicle);
                });
                vehiclesList.appendChild(vehicleElement);
            });
        }

        // 显示车辆详情
        function showVehicleDetails(vehicle) {
            // 更新3D模型
            const modelViewer = document.getElementById('model-viewer');
            if (vehicle.model_url) {
                modelViewer.src = vehicle.model_url;
            }

            // 更新车辆图片
            const vehicleImage = document.getElementById('vehicle-image');
            const imagePlaceholder = document.getElementById('image-placeholder');

            if (vehicle.image_url) {
                // 先显示占位符，隐藏图片
                vehicleImage.style.display = 'none';
                imagePlaceholder.style.display = 'flex';
                imagePlaceholder.innerHTML = '<i>🚗</i><p>图片加载中...</p>';

                // 创建新的图片对象来处理加载
                const img = new Image();
                img.onload = function() {
                    vehicleImage.src = vehicle.image_url;
                    vehicleImage.alt = `${vehicle.brand} ${vehicle.model}`;
                    vehicleImage.style.display = 'block';
                    imagePlaceholder.style.display = 'none';
                };
                img.onerror = function() {
                    imagePlaceholder.innerHTML = '<i>🚗</i><p>图片加载失败</p><p>暂无车辆图片</p>';
                    imagePlaceholder.style.display = 'flex';
                    vehicleImage.style.display = 'none';
                };
                img.src = vehicle.image_url;
            } else {
                imagePlaceholder.innerHTML = '<i>🚗</i><p>暂无车辆图片</p>';
                imagePlaceholder.style.display = 'flex';
                vehicleImage.style.display = 'none';
            }

            // 更新详情面板中的信息
            document.getElementById('license-plate').textContent = vehicle.license_plate || '-';
            document.getElementById('brand').textContent = vehicle.brand || '-';
            document.getElementById('model').textContent = vehicle.model || '-';
            document.getElementById('vin-code').textContent = vehicle.vin_code || '-';
            document.getElementById('city-id').textContent = vehicle.city_id || '-';
            document.getElementById('level-id').textContent = vehicle.level_id || '-';
            document.getElementById('model-id').textContent = vehicle.model_id || '-';
            document.getElementById('device-id').textContent = vehicle.device_id || '-';
            document.getElementById('vehicle-files-id').textContent = vehicle.vehicle_files_id || '-';
            document.getElementById('car-brain-status').textContent = vehicle.is_installed_car_brain === 1 ? '已安装' : '未安装';
            document.getElementById('car-brain-brand').textContent = vehicle.car_brain_brand || '-';
            document.getElementById('car-brain-number').textContent = vehicle.car_brain_number || '-';
            document.getElementById('large-screen-brand').textContent = vehicle.large_screen_brand || '-';
            document.getElementById('large-screen-number').textContent = vehicle.large_screen_number || '-';
            document.getElementById('status').textContent = vehicle.status === 1 ? '运营中' : '停运';
            document.getElementById('last-updated').textContent = vehicle.last_updated || '-';

            // 高亮显示选中的车辆
            document.querySelectorAll('.list-group-item').forEach(item => {
                item.classList.remove('active');
            });
            document.querySelector(`[data-vehicle-id="${vehicle.id}"]`).classList.add('active');
        }

        // 搜索功能
        document.getElementById('vehicle-search').addEventListener('input', (e) => {
            const term = e.target.value.toLowerCase();
            const filteredVehicles = mockVehicles.filter(vehicle =>
                vehicle.license_plate.toLowerCase().includes(term) ||
                vehicle.brand.toLowerCase().includes(term) ||
                vehicle.model.toLowerCase().includes(term)
            );
            renderVehicles(filteredVehicles);
        });

        // 初始化页面
        renderVehicles(mockVehicles);

        // 默认显示第一辆车的详情
        if (mockVehicles.length > 0) {
            showVehicleDetails(mockVehicles[0]);
        }
    </script>
</body>
</html>